<template>
	<view class="buffCtn">
		<image @click="ChooseTheBuff(0)" :class="{disabled:!canChoose,inactive:ChooseWho!=0&&ChooseWho!=-1,active:ChooseWho===0}" class="addTime" src="../../static/加时赛.png">
		 </image>
		
		<image @click="ChooseTheBuff(1)" :class="{disabled:!canChoose,inactive:ChooseWho!=1&&ChooseWho!=-1,active:ChooseWho===1 }" class="addClue" src="../../static/灯泡.png">
		 </image>
		
		<image @click="ChooseTheBuff(2)" :class="{disabled:!canChoose,inactive:ChooseWho!=2&&ChooseWho!=-1,active:ChooseWho===2 }" class="cutTime" src="../../static/线索.png">
		 </image>
		
	</view>
</template>

<script>
	export default {
		props: {
			buffWhich: {
				type: String,
				default: '', //选中的哪个buff
			},
			canChoose: {
				type: Boolean,
				default: true, //0默认可选，1或者其他的不可选
			},
			canChoose1: {
				type: Boolean,
				default: true, //0默认可选，1或者其他的不可选
			},
			canChoose2: {
				type: Boolean,
				default: true, //0默认可选，1或者其他的不可选
			},
			ChooseWho: {
				type: Number,
				default: -1,
			}
		},
		components: {},
		data() {
			return {};
		},
		watch:{
			ChooseWho:function(newV,oldV){
				console.log("Now choose is==>"+newV)
			}
		},
		methods: {

			ChooseTheBuff(type) {
				console.log(type + "now -->")

				this.$emit('ChooseBuffSuccess', type)
			}
		},
	};
</script>

<style scoped lang="scss">
	.active{
		scale: (1.1);
		transform: translateY(-2px);
		filter: grayscale(0) brightness(1.1);
	}
	.inactive{
		filter: grayscale(1) brightness(1.1);
	}
	.disabled {
		filter: grayscale(1) brightness(1.1);
		pointer-events: none;
	}

	.buffCtn {
		display: flex;
		flex-direction: row;
		gap: 10vw;
		justify-content: center;
		padding: 10rpx 16rpx;
		background-color: rgba(255,255,255,0.5);
		border-radius: 32rpx 32rpx 0 0;

		image {
			width: 100rpx;
			height: 100rpx;
			transition: transform 0.3s ease;
		}

		image:active {
			transform: scale(1.2);
		}
	}
</style>